<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Style Guide Boilerplate</title>
    <meta name="description" content="A starting point for crafting web style guides.">
    <meta name="viewport" content="width=device-width">
    <link rel="stylesheet" href="css/styles.css">
  </head>
  <body>

    <div class="site-header">
      <div class="container">
        <h1 class="logo">STYLE GUIDE<span>BOILERPLATE</span></h1>
        <div class="ctas">
          <a href="http://bjankord.github.io/Style-Guide-Boilerplate/demo.html" class="btn btn--cta">DEMO</a>
          <a href="https://github.com/bjankord/Style-Guide-Boilerplate" class="btn btn--cta">GITHUB</a>
        </div><!--/ctas-->
      </div><!--/container-->
    </div><!--/site-header-->

    <div class="site-body">
      <div class="container">
        <h2>WHY</h2>
        <p>If you're like me, you find yourself using common design components from one website to the next. You could grab the lastest and greatest framework and use that to handle these common components, or you could roll your own framework. <strong>Style Guide Boilerplate</strong> is geared for people interested in creating their own "<a href="http://daverupert.com/2013/04/responsive-deliverables/">tiny Bootstraps</a>".</p>

        <p><strong>Style Guides:</strong></p>
        <ul>
          <li>Promote consistency</li>
          <li>Promote modular thinking</li>
          <li>Add clarity to the parts and pieces that make up your website</li>
          <li>Increase efficiency when editing a website</li>
        </ul>

        <img src="images/screenshot.png" alt="Screenshot of Style Guide Boilerplate">

        <h2>WHAT</h2>
        <p>Style Guide Boilerplate is made up of 5 different parts.</p>

        <ul class="highlights">
          <li>
            <h3 class="highlights-title">About Section:</h3>
            <p>A place to talk about your project's style guide and how awesome it is.</p>
          </li>
          <li>
            <h3 class="highlights-title">Fonts Section:</h3>
            <p>A place to document the font-stacks used on your project's site.</p>
          </li>
          <li>
            <h3 class="highlights-title">Colors Section:</h3>
            <p>A place to document the main colors used on your project's site.</p>
          </li>
          <li>
            <h3 class="highlights-title">Base Styles Section:</h3>
            <p>A place for common HTML elements. If you’re familiar with <a href="http://smacss.com/">SMACSS</a>, you already know what base styles are for. These are styles for things like headings, blockquotes, tabular data.</p>
          </li>
          <li>
            <h3 class="highlights-title">Pattern Styles Section:</h3>
            <p>A place to list all of the common design components. This is a great place to add modular pieces of markup for things like pagination, buttons, alerts, etc., though you can also add custom styles for base elements like headings, blockquotes, tabular data here too.</p>
          </li>
        </ul>
        <div class="btn--cta-alt-mod">
          <a href="https://github.com/bjankord/Style-Guide-Boilerplate" class="btn btn--cta-alt">Get Started</a>
        </div>
      </div><!--/container-->
    </div><!--/site body-->

    <div class="site-footer">
      <div class="container">
        <ul class="list--inline">
          <li>Made by <a href="http://www.brettjankord.com/">Brett Jankord</a></li>
          <li><a href="https://github.com/bjankord">GitHub</a></li>
          <li><a href="https://twitter.com/bjankord">Twitter</a></li>
        </ul>
        <p>License: <a href="https://github.com/bjankord/Style-Guide-Boilerplate/blob/master/LICENSE.txt">MIT</a></p>
      </div><!--/container-->
    </div><!--/site body-->

    <script type="text/javascript">
      var _gaq = _gaq || [];
      _gaq.push(['_setAccount', 'UA-41788165-1']);
      _gaq.push(['_trackPageview']);

      (function() {
        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
      })();
    </script>
  </body>
</html>
